<template>
	<div>
		<!-- 点击banner图 -->
		<router-link to="/photo">		
			<div class="carousel">	
				<swiper :options="swiperOption">
				    <swiper-slide v-for="item of swiperImg" :key="item.id">
				    	<img :src="item.img" />
				    </swiper-slide>
				</swiper> 		   
				<div class="swiper-pagination"  slot="pagination"></div>
			</div>
		</router-link>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				swiperOption:{       			
			        pagination: {
			            el: ".swiper-pagination",
			            type:"fraction"
			        },
					autoplay: {
					    delay: 3000,
					    stopOnLastSlide: false,
					    disableOnInteraction: true,
					}
				},
				swiperImg:[
					{
						id:"1",
						img:"http://img1.qunarzz.com/sight/p0/1411/b8/f5fd5955bdecc923ce6d40ce453160eb.water.jpg_r_800x800_cd81e9dd.jpg"
					},
					{
						id:"2",
						img:"http://img1.qunarzz.com/sight/p0/201403/07/2ba9f49f7359f3c489757488d193dcbc.jpg_r_800x800_f671f025.jpg"
					},
					{
						id:"3",
						img:"http://img1.qunarzz.com/sight/p0/201403/07/bda83eeb24c23f60f787a2fd049045b1.jpg_r_800x800_f51aedd1.jpg"
					},
					{
						id:"4",
						img:"http://img1.qunarzz.com/sight/p0/1411/54/adb8e1aba1c0e0886ff905f5c92f7816.water.jpg_r_800x800_2c131096.jpg"
					}
				]
			}
		}
	}
</script>
<style scoped>
	.carousel{
		width: 100%;
	    position: fixed;
	    top: 0;
	    bottom: 0;
	    background-color: #000;
	    display: flex;
	    justify-content: center; 
	    align-items: center; 
	}
	.carousel img{
		width:100%;
	}
	.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
		color:#fff;
		font-size:0.3rem;
	}
</style>
